<template>
  <div class="Hleft flexC AlignItemsC">
    <!-- 动态监管 -->
    <div class="category flex1">
      <div class=" gun_t flex JustifyContentSB AlignItemsC">
        <p class=" font_s20 colorF">
          <span class="gun"></span>
          <span class="gun_p">动态监管</span>
        </p>
        <p class="font_s18 Medium cursor subtitle textC" @click="clone.weigui = true">动态模型</p>
      </div>
      <ul class="ball_ul flex cursor JustifyContentSA AlignItemsC">
        <li class="textC ball_a colorF" @click="clone.jianguan = true">
          <p class=" font_s32">{{ creditForm.jgzsNum }}</p>
          <p class="font_s18" style="padding-top: 0.7rem;">监管总数</p>
        </li>
        <li class="textC ball colorF" @click="clone.changgui = true">
          <p class=" font_s32">{{ creditForm.cgjcNum }}</p>
          <p class="font_s18" style="padding-top: 0.7rem;">常规检查</p>
        </li>
        <li class="textC ball colorF" @click="clone.zhuanxiang = true">
          <p class=" font_s32">{{ creditForm.zxjcNum }}</p>
          <p class="font_s18" style="padding-top: 0.7rem;">专项检查</p>
        </li>
        <li class="textC ball colorF" @click="clone.feixing = true">
          <p class=" font_s32">{{ creditForm.fxjcNum }}</p>
          <p class="font_s18" style="padding-top: 0.7rem;">飞行检查</p>
        </li>
      </ul>
    </div>
    <!-- 风险监管 -->
    <div class="category flex1">
      <div class=" gun_t flex JustifyContentSB AlignItemsC">
        <p class=" font_s20 colorF">
          <span class="gun"></span>
          <span class="gun_p">风险监管</span>
        </p>
        <div class="flex JustifyContentSA">
          <p class="font_s18 Bold cursor subtitle textC" @click="clone.fengxian = true">风险模型</p>
        </div>
      </div>
      <ul class="flex JustifyContentSA AlignItemsC ball_ul textC cursor">
        <li @click="switchmap(3)">
          <div class="square bgImg01">
            <p class="square_red font_s32 colorF LH3R">{{ this.homeInfo.fxdjcs === (null || undefined) ? '0' : this.homeInfo.fxdjcs }}</p>
            <p class="square_redp font_s18 colorF LH2_5R">高风险</p>
          </div>
        </li>
        <li @click="switchmap(2)">
          <div class="square bgImg02">
            <p class="square_huang font_s32 colorF LH3R">{{ this.homeInfo.fxdjbs === (null || undefined) ? '0' : this.homeInfo.fxdjbs }}</p>
            <p class="square_huangp font_s18 colorF LH2_5R">中风险</p>
          </div>
        </li>
        <li @click="switchmap(1)">
          <div class="square bgImg03">
            <p class="square_lv font_s32 colorF LH3R">{{ this.homeInfo.fxdjas === (null || undefined) ? '0' : this.homeInfo.fxdjas }}</p>
            <p class=" square_lvp  colorF LH2_5R">低风险</p>
          </div>
        </li>
      </ul>
    </div>
    <!-- 信用监管 -->
    <div class="category flex1">
      <div class=" gun_t flex JustifyContentSB AlignItemsC">
        <p class=" font_s20 colorF">
          <span class="gun"></span>
          <span class="gun_p">信用监管</span>
        </p>
        <div class="flex JustifyContentSA">
          <p class=" font_s18 Medium subtitle textC cursor" @click="clone.xinyong = true">信用模型</p>
        </div>
      </div>
      <ul class="flex JustifyContentSA AlignItemsC ball_ul textC cursor">
        <li @click="switchmapXy(3)">
          <div class="square bgImg04">
            <p class="square_red font_s32 colorF LH3R">{{ this.homeInfo.xydjcs === (null || undefined) ? '0' : this.homeInfo.xydjcs }}</p>
            <p class="square_redp font_s18 colorF LH2_5R">C &nbsp;差</p>
          </div>
        </li>
        <li @click="switchmapXy(2)">
          <div class="square bgImg05">
            <p class="square_huang font_s32 colorF LH3R">{{ this.homeInfo.xydjbs === (null || undefined) ? '0' : this.homeInfo.xydjbs }}</p>
            <p class="square_huangp font_s18 colorF LH2_5R">B &nbsp;一般</p>
          </div>
        </li>
        <li @click="switchmapXy(1)">
          <div class="square bgImg06">
            <p class="square_lv font_s32 colorF LH3R">{{ this.homeInfo.xydjas === (null || undefined) ? '0' : this.homeInfo.xydjas }}</p>
            <p class="square_lvp font_s18 colorF LH2_5R">A &nbsp;良好</p>
          </div>
        </li>
      </ul>
    </div>
    <!-- 分类监管 -->
    <div class="category flex1 flexC">
      <div class=" gun_t flex JustifyContentSB AlignItemsC">
        <p class=" font_s20 colorF">
          <span class="gun"></span>
          <span class="gun_p">分类监管</span>
        </p>
        <div class="flex JustifyContentSA">
          <p class="font_s18 Medium subtitle textC cursor" @click="clone.fenglei = true">分类模型</p>
        </div>
      </div>
      <ul class="flex JustifyContentSA AlignItemsC ball_ul textC cursor">
        <li @click="switchmapFl(3)">
          <div class="square bgImg07">
            <p class="square_red font_s32 colorF LH3R">{{ this.homeInfo.fljgcs === (null || undefined) ? '0' : this.homeInfo.fljgcs }}</p>
            <p class="square_redp font_s18 colorF LH2_5R">重点监管</p>
          </div>
        </li>
        <li @click="switchmapFl(2)">
          <div class="square bgImg08">
            <p class="square_huang font_s32 colorF LH3R">{{ this.homeInfo.fljgbs === (null || undefined) ? '0' : this.homeInfo.fljgbs }}</p>
            <p class="square_huangp font_s18 colorF LH2_5R">关注监管</p>
          </div>
        </li>
        <li @click="switchmapFl(1)">
          <div class="square bgImg09">
            <p class="font_s32 square_lv colorF LH3R">{{ this.homeInfo.fljgas === (null || undefined) ? '0' : this.homeInfo.fljgas }}</p>
            <p class="font_s18 square_lvp colorF LH2_5R">一般监管</p>
          </div>
        </li>
      </ul>
    </div>
    <YiBaoRect02 v-if="clone.weigui" @hidden="hiddenClone(0)" title="动态监管模型"><Rire></Rire></YiBaoRect02>
    <YiBaoRect02 v-if="clone.fengxian" @hidden="hiddenClone(1)" title="风险监管模型"><FxRire></FxRire></YiBaoRect02>
    <!-- 信用模型 -->
    <YiBaoRect02 v-if="clone.xinyong" @hidden="hiddenClone(2)"  title="信用监管模型"><XyRire></XyRire></YiBaoRect02>
    <YiBaoRect02 v-if="clone.fenglei" @hidden="hiddenClone(3)" title="分类监管模型"><FlRire></FlRire></YiBaoRect02>
    <!-- 动态监管 -->
    <YiBaoPolygon v-if="clone.jianguan" @hidden="hiddenClone(4)"><TotalSupervision></TotalSupervision></YiBaoPolygon>
    <YiBaoPolygon v-if="clone.changgui" @hidden="hiddenClone(5)"><Changgui></Changgui></YiBaoPolygon>
    <YiBaoPolygon v-if="clone.zhuanxiang" @hidden="hiddenClone(6)"><Zhuanxiang></Zhuanxiang></YiBaoPolygon>
    <YiBaoPolygon v-if="clone.feixing" @hidden="hiddenClone(7)"><Feixing></Feixing></YiBaoPolygon>
  </div>
</template>

<script>
import { mapFunfxjg, mapFunxyjg, mapFunfljg } from '@/components/gdmap'
import YiBaoPolygon from '@/components/YiBaoPolygon'
import YiBaoRect02 from '@/components/YiBaoRect02'
import Changgui from './leftComponents/Changgui'
import Zhuanxiang from './leftComponents/Zhuanxiang'
import Feixing from './leftComponents/Feixing'
import TotalSupervision from './leftComponents/TotalSupervision'
// 动态监管
import Rire from './leftComponents/Rire'
// 风险建管
import FxRire from './leftComponents/FxRire'
// 信用监管
import XyRire from './leftComponents/XyRire'
// 分类监管
import FlRire from './leftComponents/FlRire'
import eventBus from '../../eventBus'
export default {
  name: 'Hleft',
  components: {
    YiBaoPolygon,
    YiBaoRect02,
    Changgui,
    Zhuanxiang,
    Feixing,
    TotalSupervision,
    Rire,
    FlRire,
    FxRire,
    XyRire
  },
  data () {
    return {
      mapTab: 1,
      tempState: '1',
      isActive: 0,
      arrowImgState: false,
      clone: {
        weigui: false,
        fengxian: false,
        xinyong: false,
        fenglei: false,
        jianguan: false,
        changgui: false,
        zhuanxiang: false,
        feixing: false
      },
      creditForm: {
        jgzsNum: 0,
        cgjcNum: 0,
        zxjcNum: 0,
        fxjcNum: 0
      },
      homeInfo: {}
    }
  },
  created () {
    this.homeHandele()
    setInterval(() => {
      this.homeHandele()
      console.log('Hleft update post')
    }, 5 * 60 * 1000)
  },
  methods: {
    homeHandele () {
      this.$http.post(this.$api.Index.index, ' ', true).then(result => {
        this.homeInfo = result.data.result
      })
    },
    gdmap () {
      let map = new AMap.Map('container', {
        resizeEnable: true,
        mapStyle: 'amap://styles/darkblue',
        zoom: 12,
        center: [121.552556, 31.215723]
      })
      this.$root.MapGd = map
    },
    handle (type, value) {
      this.$http.post(this.$api.FwjgList.fwjgList, type + '=' + value, true).then(result => {
        eventBus.$emit('myFun', this.mapTab)
        if (type === 'fxdj') {
          mapFunfxjg(this.$root.MapGd, result.data.result)
        } else if (type === 'xydj') {
          mapFunxyjg(this.$root.MapGd, result.data.result)
        } else if (type === 'fldj') {
          mapFunfljg(this.$root.MapGd, result.data.result)
        }
      })
    },
    // 风险监管:低风险  中风险 高风险
    switchmap (index) {
      if (index === 1) {
        this.handle('fxdj', 'A')
      } else if (index === 2) {
        this.handle('fxdj', 'B')
      } else if (index === 3) {
        this.handle('fxdj', 'C')
      }
    },
    // 信用监管:A、B、C
    switchmapXy (index) {
      if (index === 1) {
        this.handle('xydj', 'A')
      } else if (index === 2) {
        this.handle('xydj', 'B')
      } else if (index === 3) {
        this.handle('xydj', 'C')
      }
    },
    // 分类监管:重点监管 关注监管 一般监管
    switchmapFl (index) {
      if (index === 1) {
        this.handle('fldj', 'A')
      } else if (index === 2) {
        this.handle('fldj', 'B')
      } else if (index === 3) {
        this.handle('fldj', 'C')
      }
    },
    hiddenClone (index) {
      this.isActive = index
      if (index === 0) {
        this.clone.weigui = false
      } else if (index === 1) {
        this.clone.fengxian = false
      } else if (index === 2) {
        this.clone.xinyong = false
      } else if (index === 3) {
        this.clone.fenglei = false
      } else if (index === 4) {
        this.clone.jianguan = false
      } else if (index === 5) {
        this.clone.changgui = false
      } else if (index === 6) {
        this.clone.zhuanxiang = false
      } else if (index === 7) {
        this.clone.feixing = false
      }
    }
  },
  mounted () {
    setInterval(() => {
      this.creditForm.jgzsNum = 0
      this.creditForm.cgjcNum = 0
      this.creditForm.zxjcNum = 0
      this.creditForm.fxjcNum = 0

      var creditIntervalJgzs = null
      var creditIntervalCgjc = null
      var creditIntervalZxjc = null
      var creditIntervalFxjc = null

      creditIntervalJgzs = setInterval(() => {
        if (this.creditForm.jgzsNum >= this.homeInfo.jgzs) {
          this.creditForm.jgzsNum = this.homeInfo.jgzs
          clearInterval(creditIntervalJgzs)
        } else {
          if (parseInt(this.creditForm.jgzsNum + Math.ceil(this.homeInfo.jgzs / 10)) >= this.homeInfo.jgzs) {
            this.creditForm.jgzsNum = this.homeInfo.jgzs
          } else {
            this.creditForm.jgzsNum = parseInt(this.creditForm.jgzsNum + Math.ceil(this.homeInfo.jgzs / 10))
          }
        }
      }, 60)
      creditIntervalCgjc = setInterval(() => {
        if (this.creditForm.cgjcNum >= this.homeInfo.cgjcs) {
          this.creditForm.cgjcNum = this.homeInfo.cgjcs
          clearInterval(creditIntervalCgjc)
        } else {
          if (parseInt(this.creditForm.cgjcNum + Math.ceil(this.homeInfo.cgjcs / 10)) >= this.homeInfo.cgjcs) {
            this.creditForm.cgjcNum = this.homeInfo.cgjcs
          } else {
            this.creditForm.cgjcNum = parseInt(this.creditForm.cgjcNum + Math.ceil(this.homeInfo.cgjcs / 10))
          }
        }
      }, 60)
      creditIntervalZxjc = setInterval(() => {
        if (this.creditForm.zxjcNum >= this.homeInfo.zxjcs) {
          this.creditForm.zxjcNum = this.homeInfo.zxjcs
          clearInterval(creditIntervalZxjc)
        } else {
          if (parseInt(this.creditForm.zxjcNum + Math.ceil(this.homeInfo.zxjcs / 10)) >= this.homeInfo.zxjcs) {
            this.creditForm.zxjcNum = this.homeInfo.zxjcs
          } else {
            this.creditForm.zxjcNum = parseInt(this.creditForm.zxjcNum + Math.ceil(this.homeInfo.zxjcs / 10))
          }
        }
      }, 60)
      creditIntervalFxjc = setInterval(() => {
        if (this.creditForm.fxjcNum >= this.homeInfo.fxjcs) {
          this.creditForm.fxjcNum = this.homeInfo.fxjcs
          clearInterval(creditIntervalFxjc)
        } else {
          if (parseInt(this.creditForm.fxjcNum + Math.ceil(this.homeInfo.fxjcs / 10)) >= this.homeInfo.fxjcs) {
            this.creditForm.fxjcNum = this.homeInfo.fxjcs
          } else {
            this.creditForm.fxjcNum = parseInt(this.creditForm.fxjcNum + Math.ceil(this.homeInfo.fxjcs / 10))
          }
        }
      }, 60)
    }, 4000)
  }
}
</script>
<style lang="scss" scoped>
.Hleft {
  width: 100%;
  height: 100%;
  .bj {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0%;
  }
  .category {
    margin-top: 0.625rem;
    width: 100%;
    .subtitle {
      width: 7.75rem;
      height: 1.875rem;
      background: url(../../assets/img/home/008.png) no-repeat;
      background-size: 100% 100%;
      color: #0a1943;
      font-weight: bold;
      line-height: 2rem;
    }
    .gun {
      margin: 1rem;
      padding: 0.01rem 0.15rem;
      background: rgba(255, 255, 255, 1);
    }
    .gun_t {
      box-sizing: border-box;
      background: linear-gradient(90deg, rgba(45, 125, 241, 0.6) 0%, rgba(45, 125, 241, 0.25) 100%);
    }
    .gun_p {
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
      text-shadow: 0.4375rem 0.4375rem 0.25rem rgba(0, 0, 0, 1);
    }
    .ball_ul {
      width: 100%;
      height: 12vh;
      background: url(../../assets/img/home/007.png) no-repeat;
      background-size: 100% 100%;
    }
    .ball {
      width: 6.5rem;
      height: 5.625rem;
      background: url(../../assets/img/home/009.png) no-repeat;
      background-size: 100% 100%;
    }
    .ball_a {
      width: 6.5rem;
      height: 5.625rem;
      color: #72f6f8;
      background: url(../../assets/img/home/010.png) no-repeat;
      background-size: 100% 100%;
    }
    .square {
      width: 8.625rem;
      height: 5.125rem;
      .square_lv {
        color: #48c215;
      }
      .square_lvp {
        line-height: 2.125rem;
      }
      .square_huang {
        color: #e3c403;
      }
      .square_huangp {
        line-height: 2.125rem;
      }
      .square_red {
        color: #de1313;
      }
      .square_redp {
        line-height: 2.125rem;
      }
    }
    .bgImg01 {
      background: url(../../assets/img/home/left01.png) no-repeat;
      background-size: 100% 100%;
    }
    .bgImg02 {
      background: url(../../assets/img/home/left02.png) no-repeat;
      background-size: 100% 100%;
    }
    .bgImg03 {
      background: url(../../assets/img/home/left03.png) no-repeat;
      background-size: 100% 100%;
    }
    .bgImg04 {
      background: url(../../assets/img/home/left04.png) no-repeat;
      background-size: 100% 100%;
    }
    .bgImg05 {
      background: url(../../assets/img/home/left05.png) no-repeat;
      background-size: 100% 100%;
    }
    .bgImg06 {
      background: url(../../assets/img/home/left06.png) no-repeat;
      background-size: 100% 100%;
    }
    .bgImg07 {
      background: url(../../assets/img/home/left07.png) no-repeat;
      background-size: 100% 100%;
    }
    .bgImg08 {
      background: url(../../assets/img/home/left08.png) no-repeat;
      background-size: 100% 100%;
    }
    .bgImg09 {
      background: url(../../assets/img/home/left09.png) no-repeat;
      background-size: 100% 100%;
    }
  }
}
</style>
